﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            position: relative;
        }

        img {
            display: block;
            width: 250px;
        }

        .item {
            box-shadow: 2px 2px 2px #999;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container" id="box">
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/001.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/002.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/003.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/004.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/005.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/006.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/007.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/008.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/009.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/010.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/001.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/002.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/003.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/004.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/005.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/006.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/007.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/008.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/009.jpg"></div>
        <div class="item"><img src="https://wlog.cn/demo/waterfall/images/010.jpg"></div>
    </div>
    <script>
           

            let img_width = 250;
            var gap = 10;
            window.onload = function () {
                var box = document.getElementById('box');
                var items = box.children;

                waterFall();

               
                function waterFall() {
                    var pageWidth = window.innerWidth;
                    var itemWidth = img_width;
                    var columns = parseInt(pageWidth / (itemWidth + gap));

                    var arr = [];
                    for (var i = 0; i < items.length; i++) {
                        if (i < columns) {
                         
                            items[i].style.top = 0;
                            items[i].style.left = (itemWidth + gap) * i + 'px';
                            arr.push(items[i].offsetHeight);
                        } else {
                            var minHeight = arr[0];
                            var index = 0;
                            for (var j = 0; j < arr.length; j++) {
                                if (minHeight > arr[j]) {
                                    minHeight = arr[j];
                                    index = j;
                                }
                            }
                           
                           
                            items[i].style.top = arr[index] + gap + 'px';
                           
                            items[i].style.left = items[index].offsetLeft + 'px';
                            arr[index] = arr[index] + items[i].offsetHeight + gap;
                        }
                    }
                }
               
                window.onresize = function () {
                    waterFall();
                };


              
                window.onscroll = function () {
                    if (window.innerHeight + window.pageYOffset >= items[items.length - 1].offsetTop) {
                        var j = 0;
                        while (j < 10 ) {
                            var div = document.createElement("div");
                            div.className = "item";
                            div.innerHTML = `<img src="https://wlog.cn/demo/waterfall/images/010.jpg" alt="">`;
                            div.firstChild.style.width = img_width;
                            box.appendChild(div);
                           
                            j++;
                        }
                        waterFall();
                    }

                };

            };

         
        </script>
    
</body>
</html>